import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

interface DemoUser {
  id: string;
  name: string;
  age: number;
  expand: boolean;
  random: number;
  disabled: boolean;
}

@Component({
  selector: 'resize-auto',
  templateUrl: './resize-auto.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ResizeAutoComponent implements OnInit {
  data: DemoUser[];

  // select
  showColumns; // 展示的列

  // checkboxGroup
  selected: string[] = []; // 展示的列

  visible = false;

  constructor() {}
  ngOnInit() {
    this.initData();
  }

  initData() {
    this.data = Array.from({ length: 5 }).map((item, key) => this.initUser(key, key % 2 !== 0));
  }

  initUser(key: number, disabled: boolean) {
    const colors = ['red', 'blue', 'green', 'orange'];
    return {
      id: `id${key}`,
      name: `user${key}`,
      age: 10 + key,
      expand: false,
      random: parseInt(`${Math.random() * 100}`, 10),
      disabled,
      color: colors[Math.floor(Math.random() * 4)],
    };
  }
}
